{__NOLAYOUT__}
<layout name="no_nav" />

<style>
	.text-right {
		text-align: right;
	}
	.btn-block {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.pd10 {
		padding: 10px;
	}
	footer {
		margin: .5em;
	}
	footer p {
		padding: .5em;
	}
	.evaluate {
		display: inline-block;
		font-size: 12px;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		background: #006600;
		color: #fff;
		border-radius: 3px;
	}
	.order-cancel-btn {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 2.5em;
		height: 2.5em;
		background: url() 0 0 no-repeat;
		background-size: 2.5em 5em;
	}
	.pr-account {
		position: relative;
		-moz-box-shadow:0 0 3px 3px #eee;
		-webkit-box-shadow:0 0 3px 3px #eee;
		box-shadow:0 0 3px 3px #eee;
		margin-top: 1.5em;
	}
</style>
<script src="__COMMON__/js/GH.1.1.js" charset="utf-8"></script>
<script src="__PUBLIC__/Static/js/simapp.js" type="text/javascript" charset="utf-8"></script>

<!-- TOPBAR -->
<header class="top-bar flex-row">
	<a class="row-item row-item-auto top-bar-back" href="javascript:window.history.go(-1)">返回</a>
	<h3 class="row-item top-bar-name">订单详情</h3>
	<a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<section class="order-detail lists">

	<div class="lists-item lists-item-link single">
		<p>订单状态：<b class="stress">{$order.orderStatusName}</b>
		</p>
		<p>商品总价：￥{$order.goods_amount} 运费:￥{$order.shipping_fee}</p>
		<p>应付金额：<b class="stress">￥{$order['goods_amount']+$order['shipping_fee']}</b>
		</p>
		<if condition="in_array('cancel', $order['operates'])">
			<a id="order-cancel-btn" class="order-cancel-btn" data-id="{$order.id}"></a>
		</if>
	</div>

	<div class="lists-item lists-item-link single">
		<p>下单日期：{$order.create_time|date="Y-m-d H:i:s", ###}</p>
		<p>订单编号：{$order.order_id}</p>
		<p>收货人称：{$order.consignee}&nbsp;{$order.tel}</p>
		<p>
			<span class="fl">收货地址：</span>
			<span class="order-detail-address">{$order.provinceName}&nbsp;{$order.cityName}&nbsp;{$order.areaName}&nbsp;{$order.address}</span>
		</p>
	</div>

	<!-- 订单商品列表 -->
	<div id="order-good" class="lists-item lists-item-link single">
		<volist name="order.orderItems" id="vo">
			<volist name="vo.items" id="vo_goodLists">
				<div class="pr-good-item flex-row">

					<a class="pr-good-pic row-item row-item-2" href="javascript:;">
						<img src="{:getImageUrl($vo_goodLists['productPic'], 'small')}">
					</a>

					<div class="pr-good-info row-item row-item-8">
						<h4>{$vo.productName}</h4>
						<p>规格:{$vo_goodLists.productAttr}&nbsp;
						<p>单价:{$vo_goodLists.productPrice}&nbsp;数量:{$vo_goodLists.productNumber}&nbsp;&nbsp;
						<br>小计:{$vo_goodLists['productPrice']*$vo_goodLists['productNumber']}</p>
					</div>

					<eq name="order.order_status" value="5">
						<eq name="vo_goodLists.rate_status" value="1">
							<span href="javascript:void(0)" class="evaluate">买家已评</span>
						</eq>
						<eq name="vo_goodLists.rate_status" value="3">
							<span href="javascript:void(0)" class="evaluate">双方已评</span>
						</eq>
					</eq>
				</div>
			</volist>
		</volist>
		<!--评论-->
		<eq name="order.order_status" value="5">
			<eq name="order.rate_status" value="0">
				<style type="text/css">
					#comment-container {
						width: 100%;
					}
					#comment-content {
						width: 100%;
						border: #999999 solid 1px;
						outline: none;
						border-radius: 3px;
						box-sizing: border-box;
						padding: 3px;
					}
				</style>
				<div class="pr-good-item flex-row">
					<div id="comment-container">
						<textarea name="comment-content" rows="3" id="comment-content"></textarea>
						<button id="btn-comment" href="javascript:void(0)" class="btn btn-action-red btn-block">发表评价</button>
					</div>
				</div>
			</eq>
		</eq>
	</div>
	
	<script src="__COMMON__/js/modal.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var order = {: json_encode($order)
		};
		var sid = "{$sid}";
		var data = {
			sid: sid,
			order_id: order.id,
			rates: {}
		};

		$("#btn-comment").click(function() {
			$this = $(this);
			var content = $.trim($("#comment-content").val());
			if (content == '') {
				simapp.toast("评价内容不能为空~");
				return;
			}

			$.each(order.orderItems, function(index, item) {
				$.each(item.items, function(index1, item1) {
					data.rates[item1['orderGoodsId']] = {
						content: content
					};
				});
			});

			$.ajax({
				type: 'POST',
				url: "{:U('Home/DisShopRate/ratePost')}",
				data: data,
				beforeSend: function() {
					$this.attr('disabled', true);
				},
				success: function(response) {
					console.log(response);
					if (response.error == 1) {
						simapp.toast(response.msg);
					} else {
						simapp.toast(response.msg);
						$("#comment-container").hide();
					}
				},
				error: function() {
					simapp.toast('网络错误，请重试！');
				},
				complete: function() {
					$this.removeAttr('disabled');
				}
			});
		});
	</script>

	<if condition="$order.order_status eq 4">
		<div class="lists-item lists-item-link single">
			<p>物流名称：{$order['express_name']}</p>
			<p>物流单号：{$order['shipping_no']}&nbsp;</p><br/>
			<button id="check-logistics" class="btn btn-brown btn-block">查看物流</button>
		</div>
		<!-- 代签收状态时查看物流 -->
		<div class="my-item detail-item clearfix pd10">
			
		</div>
		<div id="show-logistics" class="pd10"></div>
		<script type="text/javascript">
			(function() {
				// 查看物流
				var checkLogistics = document.getElementById("check-logistics");
				checkLogistics.addEventListener("touchend", check, false);

				function check() {
					var link = "{:getExpressLink($order['shipping_no'], $order['express_name'])}";
					location.href = link;
					/*GH.ajax("{:getExpressUrl($order['shipping_no'], $order['express_name'])}", null, function(data) {
						if (data.data) {
							showLogistics(data.data);
						} else {
							GH.showMessage(data.message);
						};
					}, "get");*/
				};

				function showLogistics(data) {
					var html = "";
					for (var i = data.length - 1; item = data[i]; i--) {
						html += "<p><span class='time'>" + item.time + "</span>" + item.context + "</p>";
					}
					document.getElementById("show-logistics").innerHTML = html;
				};
			})();
		</script>
	</if>

</section>

<if condition="in_array('pay', $order['operates'])">
	<!-- 待支付时的状态  -->
	<footer class="pr-account">
		<form action="{:U('DisShopPay/index', 'sid='.$sid)}" method="get">
			<div class="pr-account-info">
				<p>应付总额：￥{$order['goods_amount']+$order['shipping_fee']}</p>
			</div>
			<aside class="pr-account-right">
				<button type="submit" class="btn btn-orange">立即付款</button>
			</aside>
			<input type="hidden" name="id" value="{$order.id}" />
		</form>
	</footer>
</if>

<if condition="in_array('refund', $order['operates']) && (($user['id'] eq 750) or ($user['id'] eq 29))">
	<!-- 待支付时的状态  -->
	<footer class="pr-account">
		<div class="pr-account-info">
			<p>应付总额：￥{$order['goods_amount']+$order['shipping_fee']}</p>
		</div>
		<aside class="pr-account-right">
			<button type="submit" class="btn btn-orange" id="order-refund-btn">申请退款</button>
		</aside>
	</footer>
	<script type="text/javascript">
		(function() {
	
			$("#order-refund-btn").click(function() {
				$this = $(this);
				modal.confirm({
					'title': '退款订单提示',
					'text': '确定要退款吗？',
					'callback': function() {
						$.ajax({
							type: "POST",
							url: "{:U('DisShopPay/refund')}",
							async: true,
							data: {
								id: {$order['id']},
								sid: sid,
							},
							success: function(response) {
								simapp.toast(response.msg);
								if (response.error == 0) {
									window.location.reload();
								}
							},
							error: function() {
								simapp.toast("网络错误，请重试！");
							}
						});
					}
				});
				return false;
			});
		})();
	</script>
</if>

<if condition="in_array('cancel', $order['operates'])">
<script type="text/javascript">
	(function() {

		$("#order-cancel-btn").click(function() {
			$this = $(this);
			modal.confirm({
				'title': '取消订单提示',
				'text': '确定要取消此订单吗？',
				'callback': function() {
					$.ajax({
						type: "POST",
						url: "{:U('DisShopOrder/cancelOrder')}",
						async: true,
						data: {
							id: $this.attr("data-id"),
							sid: sid,
						},
						success: function(response) {
							simapp.toast(response.msg);
							if (response.error == 0) {
								window.location.reload();
							}
						},
						error: function() {
							simapp.toast("网络错误，请重试！");
						}
					});
				}
			});
			return false;
		});
	})();
</script>
</if>

<if condition="$order.order_status eq 4">
	<!-- 待确认收货时的状态  -->
	<footer class="order-detail-pay pl10 pr10">
		<notEmpty name="projectOptions">
		<p><span>捐赠项目：<select id="project-id" name="projectId">{$projectOptions}</select></p>
		</notEmpty>
		<p class="text-right"><span>应付总额：￥{$order['goods_amount']+$order['shipping_fee']}</span></p>
		<button id="confirm-good" class="btn btn-orange btn-block" data-id="{$order.id}">确认收货</button>
	</footer>
	<script src="__COMMON__/js/modal.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$("#confirm-good").click(function() {
			    $this = $(this);
				modal.confirm({
					title: '确认收货提示',
					text: '请确认您已经收到商品',
					callback: function() {
						var id = $this.attr("data-id"),
							sid = "{$sid}";
						GH.ajax("__CONTROLLER__/signIn", {
							"id": id,
							"sid": sid,
							"projectId" : $("#project-id").val()
						}, function(data) {
							simapp.toast(data.msg);
							(data.error == 0) && (window.location.reload());
						});
					}
				})
			});
		});
	</script>
</if>